<template>
    <div id="TodoArticle">
        <el-backtop :right="100" :bottom="100" />
        <div id="searchDIV">
            <el-input v-model="input" :prefix-icon="Search" id="searchTxt" @keyup.enter="setData" style="width: 35%" placeholder="搜索" />
        </div>
        <ul id="searchUL"  v-for="(item,index) of plans" :key="index" >
            <el-text id="searchNoTask" size="large">没有相关任务！</el-text>
            <li v-if="searchData.indexOf(item.time)!=-1">
                <span v-if="item.state==false"><van-icon name="circle" size="18" @click="searchClick(index)"></van-icon></span>
                <span v-else><van-icon name="passed" size="18" @click="searchClick(index)"></van-icon></span>
                <el-text class="mx-1" truncated style="margin-top: 0px;width: 70%;">{{item.content}}</el-text>
                <el-icon class="star" v-if="item.important==false" size="15" @click="searchImportantClick(index)"><Star /></el-icon>
                <el-icon class="star" v-else size="15" @click="searchImportantClick(index)"><StarFilled /></el-icon>
                <el-text class="mx-1" style="margin-top: 0;float: right;margin-right: 5px;">|</el-text>
                <el-icon style="margin-top: 20px;"><Delete  @click="deleteClick(index)"/></el-icon>
            </li>
        </ul>
        <div id="TodoArticleData">
            <van-cell  id="noAfoot" title="未添加待办事项！" style="color: #ffffffa4;text-align: center;display: none; background-color: transparent;"/>
            <ul id="mainUL"  v-for="(item,index) of plans" :key="index">
                <li v-if="ok.includes(item.time)" hidden></li>
                <li v-else-if="important.includes(item.time)">
                    <span><van-icon name="circle" size="18" @click="okClick(index)"></van-icon></span>
                    <el-text class="mx-1" truncated style="margin-top: 0px;width: 70%;">{{item.content}}</el-text>
                    <el-icon class="star" size="15" @click="searchImportantClicksx(index)"><StarFilled /></el-icon>
                    <el-text class="mx-1" style="margin-top: 0;float: right;margin-right: 5px;">|</el-text>
                    <el-icon style="margin-top: 20px;"><Delete  @click="deleteClick(index)"/></el-icon>
                </li>
            </ul>
            <ul id="mainUL2"  v-for="(item,index) of plans" :key="index">
                <li v-if="ok.includes(item.time) || important.includes(item.time)" hidden></li>
                <li v-else>
                    <span><van-icon name="circle" size="18" @click="okClick(index)"></van-icon></span>
                    <el-text class="mx-1" truncated style="margin-top: 0px;width: 70%;">{{item.content}}</el-text>
                    <el-icon class="star" size="15" @click="searchImportantClicksx(index)"><Star /></el-icon>
                    <el-text class="mx-1" style="margin-top: 0;float: right;margin-right: 5px;">|</el-text>
                    <el-icon style="margin-top: 20px;"><Delete  @click="deleteClick(index)"/></el-icon>
                </li>
            </ul>
            <!-- <van-cell  id="completedP" title="已完成" style="color: white;background-color: transparent;"/> -->
            <p id="completedP">已完成</p>
            <van-cell  id="noEnd" title="尚未完成任何任务" style="color: #ffffffa4;text-align: center;display: none; background-color: transparent;"/>
            <ul id="completedUL"  v-for="(item,index) of plans" :key="index">
                <li  v-if="ok.includes(item.time)">
                    <span><van-icon name="passed" size="18" @click="okClick(index)"></van-icon></span>
                    <el-text class="mx-1" truncated style="margin-top: 0px;width: 70%;">{{item.content}}</el-text>
                    <el-icon style="margin-top: 20px;"><Delete  @click="deleteClick(index)"/></el-icon>
                </li>
            </ul>
        </div>
        
    </div>
</template>

<script setup>
import { Delete,CircleCheck,CircleClose,CircleCheckFilled,Star,StarFilled,Search } from "@element-plus/icons-vue";


    import { ref,onMounted,watchEffect,defineEmits  } from 'vue'
    const ok = ref([])
    const input=ref('')
    const important =ref([])
	const notesOk= ref(0)
    const round= ref('iconfont icon-round')
    const roundCheck = ref('iconfont icon-round_check')
    const searchData = ref([])
    const plansData = ref([])
    const j = ref(0)
    const k = ref(0)
    const emit = defineEmits(['searchNumber'])
    const props = defineProps({
		plans: Array,
	})

    onMounted(() => {
		let h = 0
		let e = 0
		for (let i = 0; i < props.plans.length; i++) {
            if (props.plans[i].state) {
                h++
                ok.value.push(props.plans[i].time)
            } else {
                e++
            }
            if(props.plans[i].important){
                important.value.push(props.plans[i].time)
            }
		}
		if (h == 0) {
			document.querySelector('#noEnd').style.display = 'block'
            
		}
		if (e == 0) {
			document.querySelector('#noAfoot').style.display = 'block'
		}
		notesOk.value = h
	});

    function setData(){
        let value = input.value;
        if(value==''){
            location.reload()
        }
        searchData.value=[]
        document.querySelector('#TodoArticleData').style.display = 'none'
        j.value = 0
        k.value = 0
        for(let i=0;i<props.plans.length;i++){
            if(props.plans[i].content.indexOf(value)!=-1){
                searchData.value.push(props.plans[i].time)
                if(props.plans[i].state){
                    k.value++
                }
                j.value++
            }
        }
        let aaa = document.querySelector('#searchNoTask')
        if(searchData.value.length==0){
            aaa.style.display = 'block'
        }
        else{
            aaa.style.display = 'none'
            document.querySelector('#searchUL').style.display = 'block'
        }
        emit('searchNumber',j.value,k.value)
    }

    function setOkData(){
        let e = searchData.value
        searchData.value=[]
        searchData.value = e
        document.querySelector('#TodoArticleData').style.display = 'none'
        if(searchData.value.length!=0){
            document.querySelector('#searchUL').style.display = 'block'
        }
        k.value = 0
        j.value = 0
        for(let i=0;i<props.plans.length;i++){
            if(searchData.value.indexOf(props.plans[i].time)!=-1){
                if(props.plans[i].state){
                    k.value++
                }
                j.value++
            }
        }
        emit('searchNumber',j.value,k.value)
    }

    function deleteClick (index) {
		props.plans.splice(index, 1);
		save();
	}
    function searchDeleteClick(index){
        searchData.value = searchData.value.filter(function(item) {
            return item !== props.plans[index].time
        });
        props.plans.splice(index, 1);
        localStorage.setItem("plans", JSON.stringify(props.plans));
        setOkData()
    }
    function okClick(index) {
		props.plans[index].state = !props.plans[index].state;
		save()
	}
    function searchClick(index) {
		props.plans[index].state = !props.plans[index].state;
		localStorage.setItem("plans", JSON.stringify(props.plans));
        setOkData()
	}
    
    function importantClick(index) {
		props.plans[index].important = !props.plans[index].important;
		save()
	}
    function searchImportantClick(index) {
		props.plans[index].important = !props.plans[index].important;
		localStorage.setItem("plans", JSON.stringify(props.plans));
        setOkData()
	}
    function searchImportantClicksx(index){
        props.plans[index].important = !props.plans[index].important;
		localStorage.setItem("plans", JSON.stringify(props.plans));
        setOkData()
        location.reload()
    }
    function save(){
        localStorage.setItem("plans", JSON.stringify(props.plans));
        location.reload()
    }
</script>

<style scoped>
    #searchNoTask{
        display: none;
    }
    #searchDIV{
        position: relative;
        top: 0;
        left: 60%;
    }
    #sousuo{
        position: absolute;
        top: 10px;
        color: #acacac;
        left: 110px;
        font-size: clamp(0.5rem, 0.318rem + 0.91vw, 1rem);
    }
    #noAfoot,#noEnd,#searchNoTask {
		color: #ffffffa4;
        text-align: center;
		/* margin-left: 40%; */
		display: none;
	}

    #TodoArticle{
        width: 84%;
        height: 85%;
        margin-left: 8%;
        margin-top: 2vh;
        white-space:nowrap;
        overflow:auto;
    }
    #TodoArticle::-webkit-scrollbar {
        display: none;
    }
    #mainUL,#mainUL2,#completedUL,#searchUL{
        padding: 0;
        width: 100%;
    }
    #searchUL span,#TodoArticleData span,#mainUL span,#mainUL2 span{
        float: left;
        margin-top: 15px;
    }
    #mainUL li,#mainUL2 li,#completedUL li,#searchUL li{
        margin-top: 2vh;
        padding-left: 2%;
        list-style: none;
        width: 97%;
        height: 50px;
        line-height: 50px;
        font-size: clamp(0.625rem, 0.489rem + 0.68vw, 1rem);
        background-color: rgba(255, 255, 255, 0.3);
        border-radius: 10px;
    }
    .star{
        margin-top: 18px;
    }
    #TodoArticle i{
        float: right;
        margin-right: 6px;
    }
    #completedP{
        color: white;
    }
</style>